<script setup>
import {ref} from 'vue'

const props = defineProps({
  title: String,
  desc: String,
  bgImage: String
})

</script>

<template>
  <div class="page-top" :style="{ backgroundImage: `url(${bgImage})` }">
    <div class="title-box wrap">
      <h1 class="title">{{ title }}</h1>
      <p class="desc">
        {{ desc }}
      </p>
    </div>
  </div>
</template>

<style scoped>
.page-top {
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  margin-top: 60px;
  .title-box {
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    .desc {
      font-size: 16px;
      color: #ffffff;
    }
  }
}

</style>
